<template>
  <div>
    <!--    添加学生-->
    <div id="form">
      <el-form label-width="280px" :model="form">
        <el-form-item label="学生名字">
          <el-input v-model="form.name" placeholder="请输入学生姓名" style="width:100% "></el-input>
        </el-form-item>
        <el-form-item label="学生年龄">
          <el-input v-model="form.age" type="number" placeholder="请输入学生年龄" style="width:100% "></el-input>
        </el-form-item>
        <el-form-item label="学生性别">
          <el-radio style="margin-top: 10px" v-model="form.sex" label="男">男</el-radio>
          <el-radio v-model="form.sex" label="女">女</el-radio>
        </el-form-item>
        <el-form-item label="学生邮箱">
          <el-input v-model="form.email" placeholder="请输入学生邮箱" style="width:100% "></el-input>
        </el-form-item>
        <el-form-item label="学生学号">
          <el-input v-model="form.number" placeholder="请输入学生学号" style="width:100% "></el-input>
        </el-form-item>
        <el-form-item label="入学日期">
          <el-date-picker v-model="form.join_date" value-format="yyyy-MM-dd" style="width: 100%;" type="date"
                          placeholder="请选择入学日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="学生所属院系">
          <el-select v-model="form.dep_id" clearable placeholder="请选择">
            <el-option
              v-for="item in depList"
              :key="item.id"
              :label="item.depname"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-top: 50px;">
          <el-button style="margin-right: 30px" type="primary" @click="onSubmit">立即添加</el-button>
          <el-button type="info" @click="onClean">重新输入</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import departmentApi from '@/api/department'
import studentApi from "@/api/student";
import qs from "qs";

export default {
  name: "add",
  data() {
    return {
      form: {
        name: "",
        age: '',
        sex: '男',
        email: '',
        number: '',
        join_date: '',
        dep_id: ''
      },
      depList: []
    }
  },
  mounted() {
    this.selectDepList()
  },
  methods: {
    //点击添加
    onSubmit() {
      studentApi.addStudent(qs.stringify(this.form)).then(resp => {
        if (resp.code === 6666) {
          this.$message.success("添加学生成功！");
          this.onClean();
          this.$router.push('/student/list')
        } else {
          this.$message.info('添加学生失败')
        }
      }).catch(() => {
        this.$message.error("添加学生出错！")
      })
    },
    //清楚已输入的数据
    onClean() {
      this.department = {}
    },
    //加载院系列表
    selectDepList() {
      departmentApi.getAllList().then(resp => {
        if (resp.code === 6666) {
          this.depList = resp.data;
        } else {
          this.$message.warning('查询院系列表失败')
        }
      }).catch(() => {
        this.$message.error('查询院系列表出错')
      })
    }
  }
}
</script>

<style scoped>
#form {
  width: 680px;
  margin-top: 50px;
}
</style>
